<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/commons/jsp/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>   
<head>   
    <meta charset="UTF-8">   
    <title>询标界面</title>
    <!-- jqueryUI JS文件的引入 -->
	<script type="text/javascript" src="${ctx}/commons/js/jquery-1.8.0.min.js"></script>
    <script src="${ctx}/word_plugin/viewer.min.js" type="text/javascript"></script>
	<script src="${ctx}/word_plugin/viewer-jquery.min.js"></script>	
	<script type="text/javascript" src="${ctx}/commons/js/uploadify/jquery.uploadify.min.js"></script>
	<link type="text/css" href="${ctx}/commons/js/uploadify/uploadify.css" rel="stylesheet"></link>
    <style>   
  /**重置标签默认样式*/    
        /* * {    
            margin: 0;    
            padding: 0;    
            list-style: none;    
            font-family: '微软雅黑'    
        } */
        #ccontainer {    
            width: 450px;    
            height: 510px;    
            background: #eee;    
            margin: 0px auto 0;    
            position: relative;    
            box-shadow: 20px 20px 55px #777;    
        }    
        .cheader {    
            background: #000;    
            height: 40px;    
            color: #fff;    
            line-height: 34px;    
            font-size: 20px;    
            padding: 0 10px;    
        }    
        .cfooter {    
            width: 430px;    
            height: 50px;    
            background: #666;    
            position: absolute;    
            bottom: 0;    
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-top: 20px;
              
        }    
        .cfooter #text {    
		   width: 200px;
		   height: 22px;
		   outline: none;
		   font-size: 20px;
		   text-indent: 10px;
		   position: absolute;
		   border-radius: 6px;
        }    
        .cfooter .span {    
            display: inline-block;    
            width: 62px;    
            height: 30px;    
            background: #ccc;    
            font-weight: 900;    
            line-height: 30px;    
            cursor: pointer;    
            text-align: center;    
            position: absolute;    
            right: 10px;    
            border-radius: 6px;    
        }    
        .cfooter .span:hover {    
            color: #fff;    
            background: #999;    
        }    
        #user_face_icon {    
            display: inline-block;    
            background: red;    
            width: 60px;    
            height: 60px;    
            border-radius: 30px;    
            position: absolute;    
            bottom: 6px;    
            left: 14px;    
            cursor: pointer;    
            overflow: hidden;    
        }    
        .cimg {    
            width: 60px;    
            height: 60px;    
        }    
        .ccontent {    
            font-size: 20px;    
            width: 435px;    
            height: 360px;    
            overflow: auto;    
            padding: 5px;    
        }    
        .ccontent li {    
            margin-bottom: 10px; 
            padding-left: 10px;    
            width: 412px;    
            display: block;    
            clear: both;    
            overflow: hidden;    
        }    
        .ccontent li img {    
            float: left;    
        }    
        .ccontent li span{    
            background: #7cfc00;    
            padding: 10px;    
            border-radius: 10px;    
            float: left;    
            margin: 6px 10px 0 10px;    
            max-width: 310px;    
            border: 1px solid #ccc;    
            box-shadow: 0 0 3px #ccc;    
        }    
        .ccontent li img.imgleft {     
            float: left;     
        }    
        .ccontent li img.imgright {     
            float: right;     
        }    
        .ccontent li span.spanleft {     
            float: left;    
            background: #fff;    
        }    
        .ccontent li span.spanright {     
            float: right;    
            background: #7cfc00;    
        }
    </style>   
    <script>   
       
        
        var iNow = -1;    //用来累加改变左右浮动    
       	var arrIcon = ['${ctx}/commons/js/chart/me.png','${ctx}/commons/js/chart/b.png'];
        var userId="${sessionScop.loginUser.id}";
        function btnSend(){
        	
        	debugger;
        	var text=$("#text").val();
            if(text ==''){    
                return;
            }
            
            //提交表单
            var projId=$("#projId").val();
            var receiverId=$("#receiverId").val();
            var projName=$("#projectName").text();
            $.ajax({
                    url: '${ctx}/business/enquire/save', //用于文件上传的服务器端请求地址
                    type:"post",
                    data:$('#enquireForm').serialize(),
                    success: function (data, status) { //服务器成功响应处理函数
                    	//清除数据
                    	$("#content").html("");
                    	//刷新 项目询标询问数据
                		initEnquireList();
                    	
                    },
                    error: function (data, status, e){//服务器响应失败处理函数
                        alert(e);
                    }
              });
            
        	$("#text").val("");
        	
        	// 内容过多时,将滚动条放置到最底端    
           var contentUl=document.getElementById("content")
           contentUl.scrollTop=contentUl.scrollHeight;     
        }
    </script>   
</head>   
<body class="cbody">   
	<form action="${ctx}/business/enquire/save" method="post" id="enquireForm" enctype="multipart/form-data">
		<input type="hidden" value="" id="projId" name="projId">
		<input type="hidden" value="" id="receiverId" name="receiverId">
		<input type="hidden" value="" id="resourceId" name="resourceId">
		<input type="hidden" value="" id="projName" name="projName">
	    <div id="ccontainer">   
	        <div class="cheader">   
	            <span style="float: left;" id="projectName"></span>   
	            <span style="float: right;" id="currentDate"></span>   
	        </div>   
	        <ul class="ccontent"  id="content">   
		    </ul>   
	        <div class="cfooter">   
	           <%--  <div id="user_face_icon">   
	                <img class="cimg" src="${ctx}/commons/js/chart/plus.png" alt="">   
	            </div>  --%>  
	            <!-- <input id="text" type="text" readonly="true" placeholder="询标函扫描件">  
	            <div style="float: left;width: 120px;">
		            <input id="file" type="file" name="Filedata" class="upload"/>
	            </div>
	              -->
	            <div id="fileQueue" class="fileQueue" flag="25" ></div>
	            <div style="float: left;width: 120px;">
	            	<input type="file" name="uploadify" class="uploadify" id="file"/>
	            </div>
	            <input id="text" type="text" readonly="true" placeholder="询标函扫描件">
	            <span id="btn" class="span" onclick="btnSend();">发送</span>   
	        </div>   
	    </div>
	 </form>  
</body>
<script type="text/javascript">
	//初始化upload控件
	$(function(){
		$("#file").uploadify({//交易申报表
			'height'        : 27,   
            'width'         : 80,    
            'buttonText'    : '选择附件',
            'queueID': 'fileQueue1',//队列的ID
            'queueSizeLimit':5,// 附件附列长度
			'swf': '${ctx}/commons/js/uploadify/uploadify.swf',
			'uploader':'${ctx}/business/projectmanage/upload;jsessionid=${pageContext.session.id}?functionFlog=1',// 上传时请求的后台处理的controller
			'cancelImg': '${ctx}/commons/js/uploadify/uploadify-cancel.png',
			'method':'post',  
			'folder': '',
			'preventCaching' : true,
			'fileTypeExts' :'*.jpg;*.png;*.gif;*.bmp;',
			'auto': true,
			'multi': false,//是否可多选
			'buttonText':'选择',
			'buttonImg ':'${ctx}/commons/js/chart/plus.png',
			'removeCompleted' : false,
			'successTimeout' : 55555,
			'onUploadSuccess':function(file, data, response){
				debugger;
				//资源文件id
				$("#resourceId").val(data);
				var filePath=file.name;
			    if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1|| filePath.indexOf("pdf")!=-1
			    		|| filePath.indexOf("gif")!=-1
			    		|| filePath.indexOf("bmp")!=-1){
			        var arr=filePath.split('\\');
			        var fileName=arr[arr.length-1];
			        $("#text").val(fileName);
			    }else{
			        $("#text").val("");
			        return false 
			    }
			},
			'onSelectError':function(file, errorCode, errorMsg){
				switch(errorCode) {
					case -110:
						this.queueData.errorMsg='所选文件大小超出系统限制!';
						break;
					case -120:
						this.queueData.errorMsg='所选文件大小异常!';
						break;
					case -130:
						this.queueData.errorMsg='所选文件类型不正确!';
						break;
				}
			},
			'onCancel' : function(file){
				alert(2);
			}
		});

	});

	function getNowFormatDate() {
	    var date = new Date();
	    var seperator1 = "-";
	    var seperator2 = ":";
	    var month = date.getMonth() + 1;
	    var strDate = date.getDate();
	    if (month >= 1 && month <= 9) {
	        month = "0" + month;
	    }
	    if (strDate >= 0 && strDate <= 9) {
	        strDate = "0" + strDate;
	    }
	    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
	            + " " + date.getHours() + seperator2 + date.getMinutes()
	            + seperator2 + date.getSeconds();
	    return currentdate;
	}
	
	//初始化数据
	$(function(){
		init();
	});
	
	
	function init(){
		//客户端时间
		var currentDate=getNowFormatDate();
		$("#currentDate").text(currentDate);
		
		//初始化项目询标询问数据
		initEnquireList();
		
		/*//绑定事件
		$(".cimg").click(function(){
			debugger;
			
			$("#file").click();
		});
		
		//文件标签的选择事件
		$("#file").change(function(){
			debugger;
			var filePath=$(this).val();
		    if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1|| filePath.indexOf("pdf")!=-1){
		        var arr=filePath.split('\\');
		        var fileName=arr[arr.length-1];
		        $("#text").val(fileName);
		    }else{
		        $("#text").val("");
		        return false 
		    }
		})*/
	}
	
	/**
	*初始化项目询标询问数据
	*/
	function initEnquireList(){
		debugger;
		//获取参数
		//var obj = $('#threeLevelDialog').dialog('options');
        //var queryParams = obj["queryParams"];
		//alert(JSON.stringify(queryParams));
		var projId="${projId}";//obj["queryParams"]["projId"];
		var senderId="${senderId}";//obj["queryParams"]["senderId"];
		var projName="${project.name}";//obj["queryParams"]["projName"];
		//项目名
		$("#projectName").text(projName);
		$("#projName").val(projName);
		$("#projId").val(projId);
		$("#receiverId").val(senderId);
		
		$.ajax({
			type: "POST",
			timeout:20000,
			url:  "${ctx}/business/enquire/enquireList",
			data: {projId:projId,senderId:senderId},
			success: function(data){
				var result=eval("("+data+")");
				$.each(result,function(i,obj){
					//alert(obj.senderId);
					//展示数据
					var userId="${sessionScope.loginUser.id}";
					var registerId="${sessionScope.loginUser.registerId}";
					var num=0;
					if(userId==obj.senderId||registerId==obj.senderId){
						num=0;
					}else{
						num=1;
					}
					var resourceName=obj.resourceName;
					if(obj.resourceName.length>16){
						resourceName=obj.resourceName.substring(0,16)+"......";
					}
					$("#content").append('<li style="margin: 0px auto;width:200px;">'+obj.createTime+'</li>'
							+'<li><img class="cimg" id="img'+iNow+'" src="'+arrIcon[num]+'"><span id="span'+iNow+'">'
		        			+'<a href="${ctx}/office/plugin/openImg?resId='+obj.resourceId+'" target="_blank">'+resourceName+'</a>'
		        			+'</span></li>');
					if(num==0){ 
		                $("#img"+iNow).addClass('imgright');
		                $("#span"+iNow).addClass('spanright');
		            }else {    
		                $("#img"+iNow).addClass('imgleft');
		                $("#span"+iNow).addClass('spanleft');
		            }    
		        	iNow++;
		        	// 内容过多时,将滚动条放置到最底端    
		            var contentUl=document.getElementById("content")
		            contentUl.scrollTop=contentUl.scrollHeight;     
				});
			},
			error: function(res){
				
			}
		});
	}

	

</script> 
</html>
